<template>
	<view style="width: 90%;margin: 0 auto;position: relative;">
		<view style="height: 20rpx;"></view>
		<view style="display: flex;justify-content: space-between;align-items: center;">
			<view style="font-size: 30rpx;font-weight: 500;">广告收益</view>
			<u-switch activeColor="#f56c6c"  v-model="value" @change="change"></u-switch>
		</view>
		<view style="height: 20rpx;"></view>
		<map  id="myMap" :enable-satellite="vxshow" style="width: 100%; height: 300px;" :latitude="arrdata.latitude" :longitude="arrdata.longitude" :markers="markers" :circles="circles" show-location :scale="scale"></map>
		<view @click="isdiad" style="width: 90rpx;height: 110rpx;border-radius: 20rpx;background-color: #fff;position: absolute;right: 32rpx;top: 530rpx;">
		 <view  v-if="!vxshow" style="display: flex;align-items: center;font-size: 24rpx;flex-direction: column;color: #333;margin-top: 6rpx;">
			 <image style="width:60rpx;height:60rpx"  src="../../static/wx.png"></image>
			 <view>卫星图</view>
		 </view>
		 <view v-else style="display: flex;align-items: center;justify-content: center;font-size: 24rpx;flex-direction: column;color: #333;margin-top: 6rpx;">
		 	<image style="width:60rpx;height:60rpx"src="../../static/biaozhun.png"></image>
		 	<view>标准图</view>
		 </view>
		 
		</view>
		<!-- <view class="btn-area">
		  <button :disabled="!mapContext" type="primary" @tap="createMapContext">创建 map 上下文 mapContext 对象</button>
		</view> :enable-satellite="true" -->
		<view @click="pupshow=true" style="color: #333;font-size: 28rpx;margin-top: 20rpx;">锚点名称【作品中显示的位置名称】<text style="color: #2979ff;">（点击查看详情）</text></view>
		<view style="display: flex;align-content: center;justify-content: space-between;">
			<input type="text" style="background: #fff;height: 80rpx;width: 100%;border-radius: 20rpx;font-size: 28rpx;padding-left: 20rpx;color: #333;" v-model="arrdata.title"/>
		</view>
		<view style="color: #333;font-size: 28rpx;margin-top: 20rpx;">管理名称【仅自己可见，便于后台管理】</view>
		<view style="display: flex;align-content: center;justify-content: space-between;margin-bottom: 20rpx;">
			<input type="text" style="background: #fff;height: 80rpx;width: 100%;border-radius: 20rpx;font-size: 28rpx;padding-left: 20rpx;color: #333;" v-model="arrdata.name"/>
		</view>
		<u-button @click="add" :customStyle="btnGetCodes" color="#f56c6c">保存</u-button>
		<view @click="addcity" style="display: flex;align-content: center;justify-content: space-between;margin-top: 20rpx;position: relative;">
			<u-textarea type="text" style="background: #fff;width: 680rpx;border-radius: 20rpx;font-size: 28rpx;padding-left: 20rpx;color: #333;padding-right: 40rpx;" border="none" autoHeight  v-model="arrdata.address"/>
		    <view style="position: absolute;right:4px ;top: 8rpx;">
			<u-icon name="map" color="#333" size="28"></u-icon>
			</view>
		</view>
		<view style="margin: 20rpx 0;" v-if="show">
		<u-button color="#f56c6c" open-type="uploadDouyinVideo":customStyle="btnGetCode">拍抖音</u-button>
		<view style="font-size: 28rpx ;color: #333;margin: 20rpx 0;">说明:第二天晚上12点左右结算前一天收益</view>
		<view style="display: flex;justify-content: space-between;font-size: 28rpx;color: #333;align-items: center;">
			<view>汇总</view>
			<view v-for="(i,en) in list1" :key="en" @click="btns(en)" style="width: 200rpx;display: flex;align-items: center;flex-direction: column;">
				<view style="margin-top: 10rpx;">{{i.text}}</view>
				<view style="color: red;font-weight: 500;">{{i.price}}元</view>
			</view>
		</view>
		<view style="height: 80rpx;"></view>
		</view>
		<u-popup :show="pupshow" mode="center"  @close="pupshow=false" round="20rpx">
			<view style="padding: 20rpx;">
				<image style="width: 460rpx;height: 360rpx;" src="../../static/166.jpg"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pupshow:false,
				   vxshow:false,
				   show:false,
				   list1:[
				   	  {id:0,text:'完播',price:0},
				   	  {id:1,text:'昨日收益',price:0},
				   	  {id:2,text:'总收益',price:0}
				   ],
				    value:false,
					btnGetCode:{
						borderRadius:' 20rpx',
					},
					btnGetCodes:{
						width: '100%',
						height: '80rpx',
						borderRadius:' 20rpx',
						opacity: '1',
					},
				    markers: [
                       
				    ],
				    circles: [
				      {
				        latitude: null,
				        longitude: null,
				        radius: 100,
				      }
				    ],
				    scale: 15,
				    mapContext: null,
					arrdata:{},
					userform:{},
					disabled:false
			}
		},
		created() {
			this.createMapContext()
			
		},
		async onUploadDouyinVideo(uploadOptions) {
		  // 通过 uploadOptions 可以拿到 button target 上的一些信息
		  // 如这里的 demo 可以拿到 id: "1"，hello: "world"
		  console.log("onUploadDouyinVideoOptions: ", uploadOptions);
				
		  // 可以利用异步能力配合其他 API 获取必要的字段信息
		  const videoPath = await this.chooseVideo();
		  console.log("videoPath:", videoPath);
		  // 返回值（文档中称之为 uploadParams）将被当作发布参数传入视频发布器，发布视频
		  return {
		    videoPath,
		    stickersConfig: {
		      text: [
		        {
		          text: "这是文字贴图",
		          color: "#ffffff",
		          fontSize: 28,
		          scale: 1,
		          x: 0.5,
		          y: 0.5,
		        },
		      ],
		    },
		    success: function (callback) {
		      // 只有当发布成功且挂载成功时，success callback 才会有 videoId
		      console.log("success: ", callback);
		    },
		    fail: function (callback) {
		      console.log("fail: ", callback);
		    },
		    complete: function (callback) {
		      console.log("complete: ", callback);
		    },
		  };
		},
		onLoad(item) {
			if(item){
				this.arrdata = JSON.parse(item.item)
				this.arrdata.title='查看此位置'
				let arr = {
					title:this.arrdata.name,
					longitude:this.arrdata.longitude,
					latitude:this.arrdata.latitude,
					alpha: 1,
					anchorX: 0.5,
					anchorY: 1,
				}
				this.markers.push(arr)
				this.circles[0].latitude=this.arrdata.latitude
				this.circles[0].longitude=this.arrdata.longitude
			}
			this.getUser()
			
		},
		methods: {
			async getUser(){
				const {data : res} = await this.$http.post('/nav/getUser',{})
				if(res.errCode==200){
				 this.userform = res.data
				 // if(this.userform.state!=1){
				 // 	 this.disabled=true
				 // }
				 if(this.userform.state==1){
				 	this.value=true
				 }
				}
						 
			},
			chooseVideo() {
			   return new Promise((resolve) => {
			     tt.chooseVideo({
			       sourceType: ["album", "camera"],
			       compressed: true,
			       success: (res) => {
			         resolve(res.tempFilePath);
			       },
			       fail: (err) => {
			         let errType = err.errMsg.includes("chooseVideo:fail cancel")
			           ? "取消选择"
			           : "选择失败";
			         tt.showModal({
			           title: errType,
			           content: err.errMsg,
			           showCancel: false,
			         });
			         resolve("");
			       },
			     });
			   });
			 },
			change(e) {
				console.log('change', e);
				if(this.userform.state!=1){
					this.value=false
					uni.showModal({
						title: '提示',
						content: '您暂未入驻位置通，需要您入驻联系客服才能开启广告功能和收益！',
						success: async (res)=> {
							if (res.confirm) {
								uni.switchTab({
									url:'/pages/index/index'
								})	  
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				this.value=e
			},
			isdiad(){
				this.vxshow =! this.vxshow
			},
			addcity(){
				tt.chooseLocation({
					success:async (res) => {
						// console.log(res)
						this.arrdata = {
							name: res.name,
							title:"查看此位置",
							address: res.address,
							latitude: res.latitude,
							longitude: res.longitude
						}
						this.markers[0]=res
						this.markers[0].title=res.name
						this.circles[0].latitude=res.longitude
						this.circles[0].longitude=res.longitude
						await uni.request({
							url:'https://restapi.amap.com/v3/geocode/regeo?location='+res.longitude+ ',' + res.latitude + '&key=8bb398b6dca6afb31cb3672d7519653f',
							success: (res) => { 
								// console.log(res)
								let address = res.data.regeocode.addressComponent
								if(address.city.length<1){
									this.arrdata.city=address.province
									this.arrdata.district=address.district
								}else{
									this.arrdata.city=address.city
									this.arrdata.district=address.district
								}
							},
							fail: (error) => {
								uni.showToast({
									title: "获取位置信息失败222高德", 
									icon: "none"
								});
							}
						})				
						}
					})
			},
		  add(){
				if(!this.arrdata.title){
					uni.showToast({
						icon:'error',
						title:'您还没添加'
					})
					return
				}
				if(!this.arrdata.address){
					uni.showToast({
						icon:'error',
						title:'您还没添加'
					})
					return 
				}
				delete this.arrdata.errMsg
				this.arrdata.stare=0
				if(this.value){
					this.arrdata.stare=1
				}else{
					this.arrdata.stare=0
				}
				this.arrdata.yesdaynum=0
				console.log(this.arrdata)
					uni.showModal({
						title: '提示',
						content: '请核对位置是否正确',
						success: async (res)=> {
							if (res.confirm) {
								const { data : res } = await this.$http.post('/nav/addlist',this.arrdata)
								if(res.errCode==200){
									uni.showToast({
										title:'保存成功',
										success: () => {
										  this.show=true
										  setTimeout(()=>{
											  uni.navigateBack()
										  },500)
										}
									})
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
			},
           createMapContext(){
				if (this.mapContext) {
				  return
				}
				// API调用需传入 mapId(map 组件的 id)
				const mapCtx = tt.createMapContext("myMap");
				this.mapContext=mapCtx
				console.log('地图上下文::', this.mapContext);
				// mapCtx && tt.showToast({
				//       title: '创建成功'
				// });
			}
		
		}
	}
</script>

<style scoped lang="scss">
// #myMap{
// 	height: 1600rpx !important;
// }
</style>
